import { View, Text, Image, Button } from "@tarojs/components";
import Taro, { useLoad } from "@tarojs/taro";
import { useEffect, useState } from "react";
import { apis } from "../../api/api";
import { request } from "../../api/request";
import "./style.scss";

export default function Index() {
  const [userInfo, setUserInfo] = useState<any>({});
  useLoad(() => {
    console.log("Page loaded.");
  });
  useEffect(() => {
    getUserInfo();
  }, []);
  const getUserInfo = async () => {
    const result = await request("get", apis.getUserInfo);
    console.log("result", result);
    if (result?.success) {
      setUserInfo(result?.data?.user);
    }
  };
  const logout = () => {
    Taro.clearStorageSync();
    Taro.redirectTo({
      url: "/pages/login/index",
    });
  };

  return (
    <View className="user-container">
      <View className="header">
        <View className="user-desc">
          <View className="avatar">
            <Image className="avatar-image" src={userInfo?.avatar} />
          </View>
          <View className="name">
            <View className="nick-name">{userInfo.nickName}</View>
            <View className="user-name">账号：{userInfo.userName}</View>
          </View>
        </View>
      </View>
      <View className="content">
        <View>
          <Button
            className="logout-btn"
            onTap={() => {
              logout();
            }}
          >
            退出登录
          </Button>
        </View>
      </View>
    </View>
  );
}
